<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="close"
    cancelText="关闭">
    <a-card :bordered="false">
      <a-card-grid  style="width:33%;text-align:center" v-for="(item,index) in fileUrl" :bordered="false">
        <img v-if="getFileType(item)=='image'" :src="item"  style="width: 100%;height: 150px" :preview="1">
<!--        <video v-if="getFileType(item)=='video'" style="width: 100%;height: 150px" :src="item"></video>-->
        <div style="position: relative;" @click="openVideo(item)"  v-if="getFileType(item)=='video'">
          <img  :src="item+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0'" :style="{width: '100%',height: '150px'}">
          <img style="width: 50px;height: 50px;position:absolute;z-index: 1;top:50%;left: 50%;transform: translate(-50%, -50%)" src="~@/assets/play.png">
        </div>

      </a-card-grid>
    </a-card>

    <!-- 视频播放器 -->
    <a-modal v-model="videoVisible" :width="800" @cancel="videoClose" :footer="null" destroyOnClose>
      <div style="margin-top: 20px;height: 1000px">
        <vue-core-video-player
          :loop="false"
          autoplay="false"
          style="width: 100%;height: 100%"
          :src="videoUrl"
          @loadeddata="loaded" @play="playFunc" @pause="pauseFunc"
        ></vue-core-video-player>
      </div>
    </a-modal>
  </j-modal>
</template>

<script>
//播放器使用文档地址：https://www.cnblogs.com/XxMa/p/17524034.html
import VueCoreVideoPlayer from 'vue-core-video-player'
export default {
  name: 'ViewFileModel',
  components: {
  },
  data () {
    return {
      title:'',
      width:800,
      visible: false,
      disableSubmit: true,
      fileUrl: [],
      videoUrl:"",
      videoVisible:false,
    }
  },
  methods: {
    loaded (index) {
      console.log('视频开始加载第一帧的时候触发'+index)
    },
    playFunc (index) {
      console.log('播放器开始播放或从暂停到播放状态'+index)
    },
    pauseFunc (index) {
      console.log('视频停止播放的时候触发'+index)
    },

    openVideo(url){
      this.videoUrl = url;
      this.videoVisible = true;
    },
    videoClose(){
      this.videoUrl = "";
      this.videoVisible = false;
    },

    close () {
      this.visible = false;
    },
    //判断文件的类型
    getFileType(fileName) {
      const extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(); // 获取后缀名
      if ([
        "jpg", "jpeg", "png", "gif", "bmp", "webp", // 图片格式
        "ico", "tiff", "svg" // 其他常见图片格式
      ].includes(extension)) {
        return "image";
      } else if ([
        "mp4", "avi", "wmv", "mov", "mkv", "flv", // 视频格式
        "mpeg", "3gp", "webm" // 其他常见视频格式
      ].includes(extension)) {
        return "video";
      } else if ([
        "mp3", "wav", "aac", "ogg", "flac", // 音频格式
        "m4a", "opus" // 其他常见音频格式
      ].includes(extension)) {
        return "audio";
      } else {
        return "unknown"; // 或者返回更具体的类型描述，如“文档”、“音频”等
      }
    }
  }
}
</script>

<style scoped>

</style>